<template>
    <view class="container paddingBottomBar" :style="themeColor">
        <uni-load-more status="loading" v-if="isLoading"></uni-load-more>
        <view v-else>
            <view class="detail">
                <view class="detail-header">
                    <iconsfont
                        v-if="data.State == 0"
                        customIcons="icon-shenhezhong"
                        color="#ffffff"
                        size="52"></iconsfont>
                    <iconsfont v-if="data.State == 8" customIcons="icon-bohui" color="#ffffff" size="52"></iconsfont>
                    <text>{{ getBtnText() }}</text>
                </view>
                <view class="detail-item detail-price">
                    <view class="item-itle price">
                        <text class="label-text">退款金额</text>
                        <text class="value-text">¥{{ data.PriceSum }}</text>
                    </view>
                    <order-info-item label="商品金额" :value="'¥' + data.OrgPriceSum"></order-info-item>
                    <order-info-item label="审核金额" :value="'¥' + data.PriceSum"></order-info-item>
                </view>

                <view class="detail-item detail-info">
                    <view class="item-itle info">
                        <text class="label-text">申请信息</text>
                    </view>
                    <order-info-item label="退款单号" :value="data.En"></order-info-item>
                    <order-info-item label="退款时间" :value="data.AddTime"></order-info-item>
                    <order-relation label="关联订单" :value="data.OrderSn"></order-relation>
                </view>
                <view class="detail-item detail-list" @click="goGoodsList">
                    <view class="item-itle state">
                        <text class="label-text">商品清单</text>
                        <text class="value-text">{{ data.ClassNumber }}种{{ data.TotalNumber }}件</text>
                        <uni-icons type="arrowright"></uni-icons>
                    </view>
                </view>

                <view class="detail-item detail-reason" v-if="data.Remark">
                    <view class="item-itle state">
                        <text class="label-text">退款原因</text>
                    </view>
                    <view class="reason-content">
                        <text>{{ data.Remark }}</text>
                    </view>
                </view>
                <view class="detail-item detail-reason" v-if="Message && data.State == 8">
                    <view class="item-itle state">
                        <text class="label-text">驳回原因</text>
                    </view>
                    <view class="reason-content">
                        <text>{{ Message }}</text>
                    </view>
                </view>
            </view>
            <view class="bottom-bar" v-if="data.State == 0 || data.State == 8">
                <text class="btn btn-success-hollow" @click="cancellation">退单作废</text>
            </view>
        </view>

        <uni-popup ref="delTip" type="dialog">
            <uni-popup-dialog
                type="text"
                title="温馨提示"
                content="确定要作废此订单吗?"
                :before-close="true"
                @close="close"
                @confirm="doDel"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import orderInfoItem from "@/pages_shop/components/order/order-info-item.vue"
import orderRelation from "@/pages_shop/components/order/order-relation.vue"
import cardGroupCell from "@/components/common/cell/card-group-cell.vue"
import { GetReturnAddress } from "@/service/api/member.js"

import { CancelRefundApplyOrder, GetRefundDetail } from "@/service/api/order.js"

export default {
    components: {
        orderInfoItem,
        cardGroupCell,
        orderRelation,
    },
    data() {
        return {
            id: 0,
            type: "请选择快递公司",
            odd: "",
            data: {},
            isLoading: false,
            expressId: null,
            express: [],
            expressList: [],
            address: {},
            Message: "",
            showAddress: false,
        }
    },
    onLoad(e) {
        this.id = e.id
    },
    mounted() {
        this.getDetail()
    },
    methods: {
        ...mapMutations(["UP_RETURN_ORDER_VIEW"]),
        getBtnText() {
            //获取订单状态对应按钮文字
            let btnText = ""
            switch (this.data.State) {
                case 0:
                    btnText = "退款审核中"
                    break
                case 1:
                    btnText = "待退退"
                    break
                case 2:
                    btnText = "已取消"
                    break
                case 3:
                    btnText = "退退中"
                    break
                case 8:
                    btnText = "已驳回"
                    break
                case 9:
                    btnText = "已退款"
                    break
                default:
                    btnText = "退款审核中"
                    break
            }
            return btnText
        },
        goGoodsList() {
            this.easyGoTo("/pages_shop/packet/return/returnGoodsList?id=" + this.data.ID)
        },
        //获取详情
        getDetail() {
            let param = {
                id: this.id,
            }
            let path = "?exchangeId=" + this.id
            this.isLoading = true
            GetRefundDetail(param, path).then((res) => {
                this.data = res.Data
                if (res.Data.Address) {
                    if (res.Data.Address.ExpressName) {
                        this.type = res.Data.Address.ExpressName
                        this.showAddress = true
                    } else {
                        this.type = "商家配送"
                        this.showAddress = false
                    }
                } else {
                    this.showAddress = false
                }

                if (res.Data.CheckMsg) {
                    this.Message = res.Data.CheckMsg
                }
                this.isLoading = false
            })
        },

        //退单作废
        cancellation() {
            this.$refs.delTip.open()
        },
        _cancelOrder() {
            var that = this
            let param = {
                exchangeId: this.id,
            }
            let path = "?exchangeId=" + this.id
            CancelRefundApplyOrder(param, path).then((res) => {
                if (res.State == 1) {
                    uni.showToast({
                        title: "作废成功",
                        icon: "none",
                        duration: 2000,
                    })
                    setTimeout(() => {
                        that.getDetail()
                    }, 2000)
                    that.upOrderView()
                } else {
                    uni.showToast({
                        title: res.Msg,
                        icon: "none",
                        duration: 2000,
                    })
                }
            })
        },
        upOrderView() {
            this.UP_RETURN_ORDER_VIEW(new Date().getTime())
        },
        close() {
            this.$refs.delTip.close()
        },
        doDel() {
            this.close()
            this._cancelOrder()
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
}
.bottom-bar {
    .btn {
        flex: 2;
        &:first-child {
            flex: 1;
            margin-left: 0;
        }
    }
}
.detail {
    .detail-item {
        background: $color-white;
        margin-bottom: 20rpx;
    }
    .detail-header {
        height: 100rpx;
        padding: $app-page-padding;
        background: $app-color-main;
        display: flex;
        align-items: center;
        text {
            font-weight: 500;
            font-size: $font-size-36;
            color: $color-white;
            margin-left: 10rpx;
        }
    }
    .item-itle {
        padding: $app-page-padding;
        display: flex;
        flex-direction: row;
        border-bottom: solid 1rpx $uni-bg-color-grey;
        margin-bottom: 10rpx;
        align-items: center;
        .label-text {
            font-weight: 700;
            display: flex;
            flex: 1;
            color: $color-black;
            font-size: $font-size-30;
        }
        .value-text {
            font-weight: 100;
            font-size: $font-size-28;
            color: $app-color-text-main;
            color: #000000;
        }
    }
    .price {
        .label-text {
            color: $color-red;
        }
        .value-text {
            font-weight: 700;
            color: $color-red;
        }
    }
    .detail-reason {
        display: flex;
        flex-direction: column;
        .reason-content {
            margin: $app-page-padding;
            padding: $app-page-padding;
            background-color: $color-gray-5;
            text {
                font-size: $font-size-24;
            }
        }
    }
}
.pay-way-scroll {
    max-height: 50vh;
}
.order-info-item .label {
    font-size: $font-size-28;
}
</style>
